<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test9</title>
		<style>
			body
			{
				background-color: black;
			}
			#d1
			{
				position: absolute;
				top: 100px;
				left: 100px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
			}
			#d1bg
			{
				position: absolute;
				top: 0px;
				left: 0px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
				background-image: radial-gradient(circle,transparent,transparent,red);
			}
			#d1bgd
			{
				position: absolute;
				top: 0px;
				left: 0px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
				background-color: black;
				animation: bgdt 2s infinite 1s;
			}
			.cd1
			{
				position: absolute;
				height: 10px;
				width: 10px;
				border-radius: 100%;
				animation: aimt 3s infinite;
			}
			#d1d1
			{
				left: 350px;
				top: 80px;
				animation-delay: 1.9s;
			}
			#d1d2
			{
				left: 120px;
				top: 90px;
				animation-delay: 0.7s;
			}
			#d1d3
			{
				left: 420px;
				top: 210px;
				animation-delay: 2.7s;
			}
			#d2
			{
				position: absolute;
				top: 100px;
				left: 100px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
				animation: turn1 6s infinite linear;
			}
			.cd2
			{
				position: absolute;
				height: 20px;
			}
			#d2d1
			{
				animation: ts1 2s infinite ease-in-out;
			}
			#d2d2
			{
				animation: ts2 2s infinite ease-in-out;
			}
			#d2d3
			{
				
				position: absolute;
				top: 249px;
				left: 0px;
				height: 1px;
				width: 500px;
				background-color: gold;
			}
			#d2d4
			{
				position: absolute;
				top: 250px;
				left: 0px;
				height: 50px;
				width: 250px;
				background-image: linear-gradient(chartreuse,transparent,transparent,transparent);
			}
			#d2d5
			{
				position: absolute;
				top: 200px;
				left: 250px;
				height: 50px;
				width: 250px;
				background-image: linear-gradient(transparent,transparent,transparent,chartreuse);
			}
			#d2d6
			{
				position: absolute;
				left: 235px;
				top: 235px;
				height: 30px;
				width: 30px;
				border-radius: 100%;
				background-color: chartreuse;
			}
			@keyframes ts1
			{
				0% {
					top: 240px;
					left: 0px;
					width: 0px;
					height: 20px;
					background-color: aqua;
				}
				50% {
					top: 235px;
					left: 150px;
					width: 200px;
					height: 30px;
					background-color: transparent;
				}
				100% {
					top: 240px;
					left: 500px;
					width: 0px;
					height: 20px;
					background-color: aqua;
				}
			}
			@keyframes ts2
			{
				0% {
					top: 240px;
					left: 500px;
					width: 0px;
					height: 20px;
					background-color: aqua;
				}
				50% {
					top: 235px;
					left: 150px;
					width: 200px;
					height: 30px;
					background-color: transparent;
				}
				100% {
					top: 240px;
					left: 0px;
					width: 0px;
					height: 20px;
					background-color: aqua;
				}
			}
			@keyframes turn1
			{
				0%
				{
					transform: rotate(0deg);
				}
				100%
				{
					transform: rotate(360deg);
				}
			}
			@keyframes bgdt
			{
				0%
				{
					background-color: black;
				}
				50%
				{
					background-color: transparent;
				}
				100%
				{
					background-color: black;
				}
			}
			@keyframes aimt
			{
				0%
				{
					background-color: transparent;
					box-shadow: 0px 0px 0px transparent;
				}
				50%
				{
					background-color: chartreuse;
					box-shadow: 0px 0px 15px chartreuse;
				}
				100%
				{
					background-color: transparent;
					box-shadow: 0px 0px 0px transparent;
				}
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d1bg"></div>
			<div id="d1bgd"></div>
			<div class="cd1" id="d1d1"></div>
			<div class="cd1" id="d1d2"></div>
			<div class="cd1" id="d1d3"></div>
		</div>
		<div id="d2">
			<div class="cd2" id="d2d1"></div>
			<div class="cd2" id="d2d2"></div>
			<div id="d2d3"></div>
			<div id="d2d4"></div>
			<div id="d2d5"></div>
			<div id="d2d6"></div>
		</div>
	</body>
</html>